<template>
	<el-dropdown class="dropdown" trigger="click" @command="handleSetLanguage">
		<span class="el-dropdown-link">
			<template v-for="(item, index) in ELanguage" :key="index">
				<span v-if="item == language">{{ index }}</span>
			</template>
			<IEpArrowDown />
		</span>
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item v-for="(item, index) in ELanguage" :key="item" :disabled="language === item" :command="item">{{ index }}</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
</template>

<script setup lang="ts">
import { ELanguage } from "@/enums/appEnum";
import { useBaseStore } from "@/store/base";
import { TLanguage } from "@/store/interface/base";
import { useI18n } from "vue-i18n";
// 获取透传属性
const attrs = useAttrs();

const { language } = storeToRefs(useBaseStore());
const i18n = useI18n();
/**
 * 切换语言
 * @param lang
 */
const handleSetLanguage = (lang: TLanguage) => {
	i18n.locale.value = lang;
	language.value = lang;
};
</script>
<style lang="scss" scoped>
.dropdown {
	margin: 0 12px;
	.el-dropdown-link {
		display: flex;
		font-size: 18px;
		font-weight: bold;
		color: v-bind("attrs.color");
		cursor: pointer;
	}
}
</style>
